<template>
	<view class="apps">
		<view class="list" v-for="(item,index) in list" @click="handle(item.id)" v-if="list.length > 0">
			<view class="img">
				<image :src="item.image_url" style="width: 100%;height: auto;" mode="widthFix"></image>
			</view>
			<view class="info">
				<view class="title">{{item.title}}</view>
				<view class="time">
					<uv-icon name="clock-fill" ></uv-icon>
					<view style="margin-left: 10rpx;">{{item.start_time}}</view>
				</view>
				<view class="time">
					<uv-icon name="map-fill" ></uv-icon>
					<view style="margin-left: 10rpx;">{{item.city_text}}</view>
				</view>
				<view class="btw" >
					<view></view>
					<uv-tags text="已结束" type="error" plain plainFill  size="mini" v-if="item.process == 0 "></uv-tags>
					<uv-tags :text="item.nums==0?`报名中`:`已报名`+item.nums" plain plainFill  size="mini" v-else></uv-tags>
				</view>
			</view>
		</view>
		<view v-else>
			<uv-empty mode="data"></uv-empty>
		</view>
		<view class="add-tap">
			<view class="tap" @click="handlepage('/pages/special/created')">
				<uv-icon name="plus" size="40px" color="#fff"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow,onReachBottom } from '@dcloudio/uni-app'
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	const list =ref([]),page=ref(1),more=ref(true)
	const handlepage = (e)=>{
			uni.navigateTo({
				url:e,
			})
		},
		handle =(id)=>{
			uni.navigateTo({
				url:'/pages/special/detail?id='+id,
			})
		},
		getlist = ()=>{
			let pageNumber = page.value;
			let page_size = 10;
			util.request({
				url:"/special/index",
				data:{page:pageNumber,page_size:page_size},
				success:function(res){
					if(res.data.length < page_size){
						more.value = false;
					}
					if(pageNumber == 1){
						list.value = res.data;
						
					}else{
						list.value.push(...res.data);
					}
				}
				
			})
		}
	onLoad(()=>{
		getlist()
	})
</script>

<style scoped>
	.list{margin:15rpx 10rpx; padding:15rpx;background-color: #eef0f9; display: flex; border-radius: 5rpx;}
	.list .img{width:320rpx; margin-right: 10rpx; min-height: 160rpx;}
	.list .info{flex:1;display: flex;flex-direction: column;}
	.list .info .title{font-size: 26rpx; margin-bottom: 15rpx;display: flex; overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 控制行数 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;}
	.list .info .time{font-size: 22rpx; display: flex; align-items: center;}
	.list .info .btw{display: flex; justify-content: space-between;}
	.add-tap{bottom: 100px;right: 20px;width: 40px;height: 40px;position: fixed;z-index: 10;}
	.add-tap .tap{display: flex;flex-direction: column;align-items: center;flex: 1;height: 100%;justify-content: center;border-radius: 4px; background-color:#55aaff;}
</style>
